<template>
	<view>
		<view class="index_info">
			<!-- banner Start -->
			<view class="swiper-back">
				<banner :swiperImg="swiperImg"></banner>
			</view>
			<!-- banner End -->
			
			<!-- 公告栏 Start -->
			<view class="jn-com-part">
				<uniNoticeBar scrollable="true" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏" showIcon= true></uniNoticeBar>
			</view>
			
			<!-- 公告栏 End -->
			
			
			<scroll-view id="scrollview" scroll-y="true" :scroll-with-animation="true" scroll-top="0">
				<!-- 常用应用Start -->
				<view class="jn-com-part">
					<view class="jn-com-main">
						<view class="common">
							<view>
								<text>常用应用</text>
							</view>
							<view @tap="appsoftware"><label class="iconfont icon-bianji3 font-size22 color-9A9A9A" /></view><!-- 编辑 -->
						</view>
						
						<view class="uni-grid">
							<view class="grid-9">
								<view class="uni-grid-9 padding-bottom30">
									<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in comflow" :key="index" @click="flowform(item,$event)">
										<view class="uni-grid-9-ico" :style="{'background':item.F_IconBackground|| '#008cff'}">
											<view class="icon-box-lin">
												<label class="font-size60" :class="item.F_Icon" style="color: #FFFFFF;"/>
											</view>
										</view>
										<text class="uni-grid-9-text" :class="item.F_FullName.length>5?'overflow-text':''">{{item.F_FullName}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 常用应用 End -->
				
				<!-- 图表Start -->
				<view class="jn-com-part">
					<view class="common qiun-bg-white qiun-title-bar qiun-common-mt" style="border-radius: 10rpx 10rpx 0 0;">
						<text>数据简报</text>
						<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
					</view>
					<view class="qiun-charts" style="border-radius: 0rpx 0rpx 10rpx 10rpx;">
						<!--#ifdef MP-ALIPAY -->
						<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
						 disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
						<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
						<!--#endif-->
						
						<!--#ifndef MP-ALIPAY -->
						<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
						 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
						<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
						<!--#endif-->
					</view>
				</view>
				<!-- 图表End -->
				
				
				<view class="jn-com-part">
					<view class="jn-com-main">
						<view class="common">
							<view><text>销售简报</text></view>
							<view class="dateData" @click="showList"><text class="font-size28">{{Briefingdate}}</text><text class="iconfont font-size28 icon-xiangxia"></text>
							</view>
						</view>
						<view class="uni-grid-6">
							<view class="uni-grid-7-item" hover-class="" v-for="(item,index) in marketList " :key="index">
								<text class="item7-icon iconfont" :class="item.icon"></text>
								<view class="item7-right">
									<view class="item7-num"><text style="margin-right: 10upx;">{{item.count}}</text><label class="color-555555 font-size28">{{item.unit}}</label></view>
									<view class="item7-intro">{{item.text}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="jn-com-part">
					<view class="jn-com-main">
						<view class="common">
							<view><text>最近签约</text></view>
						</view>
						<view class="background-colorFFF  margin-bottom-10">
							<view class="signcontract " :class="{'signcontracts':index!=contractlist.length-1}" v-for="(item,index) in contractlist"
							 :key="index">
								<view class="sign_text"><text class="ladot"></text> {{item.text}}</view>
								<view class="sign_date"> {{item.time}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js'
	import helper from '@/common/js/helper.js'
	import baseui from '@/common/js/base-ui.js'
	import config from '@/common/js/config.js'
	import wPicker from '@/components/w-picker/w-picker.vue'
	import banner from './banner/banner.vue'
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	
	let _self;
	let canvasObj  = null;
	/* 图表数据 */
	let Data = {
		"LineA": {
			"categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
			"series": [{
				"name": "成交量A",
				"data": [35, 8, 25, 37, 4, 20]
			}, {
				"name": "成交量B",
				"data": [70, 40, 65, 100, 44, 68]
			}, {
				"name": "成交量C",
				"data": [100, 80, 95, 150, 112, 132]
			}]
		},
	}
	export default {
		components: {
			wPicker,
			banner,
			uniNoticeBar
		},
		data() {
			return {
				notifys: [],
				comflow: [],
				showDatal: false,
				timeStamp: 0,
				/* 弹出框数据 */
				dataList: [{
						label: "本周",
						value: "1"
					},
					{
						label: "上周",
						value: "2"
					},
					{
						label: "本月",
						value: "3"
					},
					{
						label: "上月",
						value: "4"
					},
					{
						label: "本季度",
						value: "5"
					},
					{
						label: "上季度",
						value: "6"
					},
					{
						label: "本年",
						value: "7"
					},
					{
						label: "上年",
						value: "8"
					},
				],
				/* 销售简报 */
				marketList: [{
						count: 1,
						text: '新增客户',
						icon: 'icon-ym-xinzengkehu',
						unit: '个'
					}, {
						count: 2,
						text: '新增联系人',
						icon: 'icon-ym-xinzenglianxiren',
						unit: '个'
					},
					{
						count: 3,
						text: '新增商机',
						icon: 'icon-ym-xinzengshangji',
						unit: '个'
					},
					{
						count: 4,
						text: '新增合同',
						icon: 'icon-ym-xinzenghetong',
						unit: '个'
					},
					{
						count: 5,
						text: '合同金额',
						icon: 'icon-ym-hetongjine',
						unit: '元'
					},
					{
						count: 6,
						text: '商机金额',
						icon: 'icon-ym-gengduo2',
						unit: '元'
					},
					{
						count: 7,
						text: '回款金额',
						icon: 'icon-ym-huikuanjine',
						unit: '元'
					},
					{
						count: 8,
						text: '新增跟进记录',
						icon: 'icon-ym-xingzenggenjingjilu',
						unit: '条'
					},
				],
				/* 最近签约 */
				contractlist: [{
						time: "07-21",
						text: "上海亚太计算机信息系统有限公司"
					},
					{
						time: "08-21",
						text: "南京中车浦镇工业物流有限公司"
					},
					{
						time: "09-21",
						text: "山西晋煤集团技术研究院有限责任公司"
					},
					{
						time: "10-21",
						text: "长春机场集团有限公司"
					},
					{
						time: "11-21",
						text: "合肥工业大学"
					},
					{
						time: "12-21",
						text: "广西师范大学"
					},
					{
						time: "06-21",
						text: "中国邮政速递物流股份有限公司"
					}
				],
				contime: 0,
				currentb: 0,
				pixelRatio: 1,
				bannerDot: [{
					id: 0
				}, {
					id: 1
				}, {
					id: 2
				}],
				cWidth: '',
				cHeight: '',
				tips: '',
				pixelRatio: 1,
				serverData: '',
				hideTem: false,
				pickerList: [],
				mode: '',
				isSearchShow: false,
				Briefingdate: '本周',
				
				/* bannerData */
				swiperImg: [{
						homeUrl: config.Resources.banner.home1Url,
					},
					{
						homeUrl: config.Resources.banner.home3Url,
					},
					{
						homeUrl: config.Resources.banner.home2Url,
					}
				],
				badge: 0,
				flag: true,
				timeout: 3000,
				timeObj: '',
				serverTimeObj: '',
				socket: null,
				depList: [],
				comList: [],
				userList: [],
				posList: [],
				dicList: [],
			}
		},
		onLoad() {
			
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(730);
			this.cHeight = uni.upx2px(500);
			/* 图标插件 */
			this.fillData(Data);
			try {
				const _data = uni.getStorageSync(config.Global.cache + '_appsoftware_key');
				
				if (_data) {
					_self.comflow = _data;
				} else {
					_self.provider();
				}
				
				setTimeout(function() {
					_self.badge = uni.getStorageSync(config.Global.cache + '_Badge');
					_self.tabBarBadge(_self.badge)
				}, 500);
			} catch (e) {}
			
			// 获取消息中心列表
			// helper.ajax({
			// 	url: '/api/system/Message',
			// 	method: 'GET',
			// 	data: {
			// 		type: 1,
			// 		pageSize: 10, //每页行数
			// 		currentPage: 1, //当前页
			// 	},
			// 	success: res => {
			// 		this.notifys = res.data.data.list;
			// 	}
			// });
			
			
			if (!this.$store.state.wschat.socketState) {
				helper.webSocket();
				// this.appIM();
			}
			
			this.select()
		},
		
		onReady() {
			
		},
		
		mounted() {
			this.initData();
			// this.$nextTick(function() {
			// 	setTimeout(() => {
					
					
			// 	}, 50);
			// })
		},
		onShow() {
			try {
				const _data = uni.getStorageSync(config.Global.cache + '_appsoftware_key');
				if (_data) {
					this.comflow = _data;
				}
			} catch (e) {
				//TODO handle the exception
			}
			let _flow = this.$store.state.workflow.comflows;
			let flows = this.comflow;
			for (let i = 0; i < flows.length; i++) {
				if (flows[i].F_IconBackground != "") {
					flows[i].F_IconColor = 'text' + flows[i].F_IconBackground.slice(2)
				} else {
					flows[i].F_IconColor = 'text-default'
				}
			}
			this.comflow = flows;
		},
		methods: {
			initData() {
				try {
					const dictionaryList = uni.getStorageSync(config.Global.cache + '_DictionaryList');
					if (!dictionaryList) {
						helper.ajax({
							url: "/api/system/Base/DictionaryData/All",
							success: function(res) {
								
								uni.setStorage({
									key: config.Global.cache + '_DictionaryList',
									data: res.data.data.list
								});
							}
						});
					}
					/* 消息页通讯录请求 */
					const userList = uni.getStorageSync(config.Global.cache + '_UserList');
					if (!userList) {
						helper.ajax({
							url: "/api/system/Permission/Users/All",
							success: function(res) {
								uni.setStorage({
									key: config.Global.cache + '_UserList',
									data: res.data.data.list
								});
							},
						});
					}
					
					const roleList = uni.getStorageSync(config.Global.cache + '_RoleList');
					if (!roleList) {
						helper.ajax({
							url: "/api/system/Permission/Role",
							success: function(res) {
								let _data = {};
								const roleList = res.data.data.list
								for (let i = 0; i < roleList.length; i++) {
									_data[roleList[i].F_Id] = {
										'F_EnCode': roleList[i].enCode,
										'F_FullName': roleList[i].fullName
									};
								};
								uni.setStorage({
									key: config.Global.cache + '_RoleList',
									data: _data
								});
							}
						});
					}
					const positionList = uni.getStorageSync(config.Global.cache + '_PositionList');
					if (!positionList) {
						helper.ajax({
							url: "/api/system/Permission/Position/All",
							success: function(res) {
								if (res.data.code == '200') {
									let _data = {};
									const positionList = res.data.data.list;
									for (let i = 0; i < positionList.length; i++) {
										_data[positionList[i].F_Id] = {
											'F_EnCode': positionList[i].enCode,
											'F_FullName': positionList[i].fullName,
											'F_OrganizeId': positionList[i].organizeId
										};
									};
									uni.setStorage({
										key: config.Global.cache + '_PositionList',
										data: _data
									});
								}
							}
						});
					}
					const organizeList = uni.getStorageSync(config.Global.cache + '_OrganizeList');
					if (!organizeList) {
						helper.ajax({
							url: "/api/system/Permission/Organize",
							success: function(res) {
								// // console.log(res)
								if (res.data.code == '200') {
									let _data = {};
									const organizeList = res.data.data.list;
									for (let i = 0; i < organizeList.length; i++) {
										_data[organizeList[i].id] = {
											'F_EnCode': organizeList[i].enCode,
											'F_FullName': organizeList[i].fullName,
											'F_ParentId': organizeList[i].parentId,
											'F_Category': organizeList[i].category
										};
									};
									uni.setStorage({
										key: config.Global.cache + '_OrganizeList',
										data: _data
									});
								}
							}
						});
					}
				} catch (e) {
					
					
				}
			},
			
			
			provider (){
				const userProvider = uni.getStorageSync(config.Global.cache + '_UserProvider');
				if (!userProvider) {
					helper.ajax({
						url: '/api/oauth/App/CurrentUser',
						success: res => {
							let _data = res.data.data;
							let flowEngineList = [];
							for (let i = 0; i < _data.flowFormList.length; i++) {
								if (i < 8) {
									this.comflow.push({
										'F_Id': _data.flowFormList[i].id,
										'F_Category': _data.flowFormList[i].category,
										'F_FullName': _data.flowFormList[i].fullName,
										'F_IconBackground': _data.flowFormList[i].iconBackground,
										'F_Icon': _data.flowFormList[i].icon,
										'F_EnCode': _data.flowFormList[i].enCode,
										'F_FormType': _data.flowFormList[i].formType,
										'F_Iscom': true
									})
								}
								flowEngineList.push({
									'F_Id': _data.flowFormList[i].id,
									'F_Category': _data.flowFormList[i].category,
									'F_FullName': _data.flowFormList[i].fullName,
									'F_IconBackground': _data.flowFormList[i].iconBackground,
									'F_Icon': _data.flowFormList[i].icon,
									'F_EnCode': _data.flowFormList[i].enCode,
									'F_FormType': _data.flowFormList[i].formType,
									'F_Iscom': i < 8 ? true : false
								});
							}
							/* 设置本地缓存 */
							uni.setStorage({//常用应用
								key: config.Global.cache + '_appsoftware_key',
								data: this.comflow
							});
							uni.setStorage({
								key: config.Global.cache + '_FlowEngineList',
								data: flowEngineList
							});
							uni.setStorage({
								key: config.Global.cache + '_UserProvider',
								data: _data.userInfo
							});
							uni.setStorage({
								key: config.Global.cache + '_ApplyMenu',
								data: _data.menuList
							});
						},
					});
				}
			},
			
			
			
			
			bannerChange: function(e) {
				let current = e.detail.current;
				this.currentb = current;
			},
			showList() {
				this.showDatal = !this.showDatal;
				this.pickerList = this.dataList;
				this.mode = "selector";
				this.$refs.picker.show();
				this.$eventHub.$off('popupmodality');
				this.$eventHub.$on('popupmodality', (data) => {
				this.showDatal = false;
				this.Briefingdate = data.result;
				this.$eventHub.$off('popupmodality');
				});
			},
			changeList(item) {
				this.date = item;
			},
			
			/* 常用应用编辑 */
			appsoftware() {
				uni.navigateTo({
					url: '../work/operate/appsoftware/appsoftware',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			/* 常用应用点击跳转 */
			flowform(e, event) {
				// #ifdef MP
				uni.removeStorageSync("F_Status")
				// #endif
				
				// console.log(e)
				/* 点击保存标题 */
				uni.setStorageSync("F_FullName",e.F_FullName)
				/* 保存 F_Category*/
				uni.setStorageSync("F_Category",e.F_Category)
				
				// #ifdef MP
				if (this.timeStamp == 0) {
					this.timeStamp = event.timeStamp;
				} else {
					if (event.timeStamp - this.timeStamp < 800) {
						return;
					}
					this.timeStamp = event.timeStamp;
				}
				// #endif
				// #ifndef MP
				if (this.timeStamp == 0) {
					this.timeStamp = event.mp.timeStamp;
				} else {
					if (event.mp.timeStamp - this.timeStamp < 800) {
						return;
					}
					this.timeStamp = event.mp.timeStamp;
				}
				// #endif
				// console.log(e.F_EnCode)
				let flowname = e.F_EnCode.toLowerCase();
				// console.log(flowname);
				let flowInfo = {
					operstate: 'add',
					id: e.F_Id,
					initId: e.F_Id,
					status: 0
				}
				let url = '/pages/work/flowchart/' + flowname + '/' + 'form?flowInfo=' + JSON.stringify(flowInfo);
				if(e.F_FormType==2){
					// console.log('ok')
					url = '/pages/work/flowchart/dynamic/form?flowInfo=' + JSON.stringify(flowInfo)
				}
				uni.navigateTo({
					url: url,
					success: res => {},
					fail: () => {
						// console.log('暂无此页面')
						helper.msg('暂无此页面')
					},
					
				});
			},
			/* 底部导航徽标 */
			tabBarBadge(badge) {
				// #ifndef MP-ALIPAY
				if (badge > 0) {
					uni.setTabBarBadge({
						index: 1,
						text: badge > 99 ? '99+' : badge.toString(),
					});
				} else {
					uni.removeTabBarBadge({
						index: 1,
					});
				}
				// #endif
			},
			
			
			/* 图表数据填充 */
			fillData(Data) {
				this.serverData = Data;
				
				this.tips = Data.tips;
				
				/* 保存数据 */
				let LineA = {
					categories: [],
					series: []
				};
				
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				//这里的series数据是后台做好的，如果您的数据没有和前面我注释掉的格式一样，请自行拼接数据
				
				LineA.categories = Data.LineA.categories;
			
				LineA.series = Data.LineA.series;
				
				this.showLineA("canvasLineA",LineA);
				
			},
			
			/* 图表插件 */
			
			showLineA(canvasId, chartData) {
				
				/* 实例化方法 */
				canvasObj = new uCharts({
					$this: _self,/* this */
					canvasId: canvasId, /* 定义在组件中的ID*/
					type: 'line', /* 图表类型*/
					fontSize: 11,
					padding:[15,15,0,15],
					rotate: false, /* 横屏模式*/
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:5,
					},
					dataLabel: true,/* 是否在图表中显示数据标签内容值 */
					dataPointShape: true, /* 是否在图表中显示数据点图形标识*/
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,/* 数据类别 Array*/
					series: chartData.series, /* 数据列表 Array*/
					animation: false,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {/* X轴配置 */
						disableGrid: false, /* (false 即默认绘制网格)*/
						type: 'grid',
						gridType: 'dash',
						itemCount: 5, /* 即X轴数据密度），配合拖拽滚动使用（即仅在启用enableScroll时有效）*/
						scrollShow: true, /* 是否显示滚动条，配合拖拽滚动使用*/
						scrollAlign: 'left',
						labelCount: 6, /* X轴数刻度标签单屏幕限制显示的数量）默认series.data.length*/
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						splitNumber: 8,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0) + '元'
						} //如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						lineStyle: 'straight'
					},
				});
			},
			
			/* 图表事件 */
			touchLineA(e) {
				canvasObj.scrollStart(e);
			},
			moveLineA(e) {
				canvasObj.scroll(e);
			},
			touchEndLineA(e) {
				canvasObj.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvasObj.showToolTip(e, {
					format: function(item,category) {
						// console.log(item,category)
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			
			
			select() {
				this.comSelect();
				this.depSelect();
				this.postSelect();
				this.userSelect();
				this.dicSelect();
			},
			
			/* 公司下拉数据 */
			async comSelect() {
				const _data = uni.getStorageSync('comList');
				if (_data) {
					this.comList = _data;
					return;
				}
				const res = await this.$helper.ajaxPromise({
					url: '/api/system/Permission/Organize/Selector',
				})
				let treedata = res.data.data.list;
				this.comList = treedata;
				uni.setStorageSync('comList', this.comList)
			},
			
			/* 部门下拉数据 */
			async depSelect() {
				const _data = uni.getStorageSync('depList');
				if (_data) {
					this.depList = _data;
					return;
				}
				const res = await this.$helper.ajaxPromise({
					url: '/api/system/Permission/Organize/Department/Selector',
				})
			
				let treedata = res.data.data.list;
				this.depList = treedata;
				uni.setStorageSync('depList', this.depList)
			},
			
			/* 岗位下拉数据 */
			async postSelect() {
				const _data = uni.getStorageSync('posList');
				if (_data) {
					this.posList = _data;
					return;
				}
				const res = await this.$helper.ajaxPromise({
					url: '/api/system/Permission/Position/Selector',
				})
			
				let treedata = res.data.data.list;
				this.posList = treedata;
				uni.setStorageSync('posList', this.posList)
			},
			
			/* 用户下拉数据 */
			async userSelect() {
				const _data = uni.getStorageSync('userList');
				if (_data) {
					this.userList = _data;
					return;
				}
				const res = await this.$helper.ajaxPromise({
					url: '/api/system/Permission/Users/Selector',
				})
			
				let treedata = res.data.data.list;
				this.userList = treedata;
				uni.setStorageSync('userList', this.userList)
			},
			
			/* 数据字典 */
			async dicSelect() {
				const _data = uni.getStorageSync('dicList');
				if (_data) {
					this.dicList = _data;
					return;
				}
				const res = await this.$helper.ajaxPromise({
					url: '/api/system/Base/DictionaryType',
				})
			
				let treedata = res.data.data.list;
				this.dicList = treedata;
				uni.setStorageSync('dicList', this.dicList)
			},
		},
		onUnload() {
			this.showDatal = false;
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				uni.scanCode({
					success: function(res) {
						// console.log(JSON.stringify(res.result))
					},
					fail(e) {
						// console.log(JSON.stringify(e));
					}
				});
			};
			if (e.index == 1) {
				// console.log("第一个按钮");
			};
		},
	}
</script>

<style>
	page {
		background-color: #f0f2f6;
	}

	swiper {
		height: 380rpx;
		width: 95% !important;
		margin: 0 auto;
		border-radius: 20rpx;
		css-webkit-appearance: none;
		overflow: hidden;
	}

	/* #ifdef MP-ALIPAY */
	.swiper-image {
		width: 100% !important;
		height: 380upx !important;
	}

	/* #endif */

	.dateData {
		display: flex;
		align-items: center;
		position: relative;
		white-space: nowrap;
		font-size: 32rpx;
	}

	.dataList {
		background: #FFFFFF;
		z-index: 99;
		padding: 20rpx 40rpx 0 40rpx;
		box-shadow: 0 0 16rpx #9A9A9A;
		position: absolute;
		top: 66rpx;
		right: 0rpx;
	}

	.dataList::after {
		content: "";
		position: absolute;
		top: -34rpx;
		left: 80rpx;
		height: 0;
		width: 0;
		border: 20rpx solid;
		border-color: transparent transparent white transparent;
	}

	.dataitem {
		white-space: nowrap;
		margin-bottom: 20rpx;
		font-size: 32rpx;
	}

	.swiper-back {
		background: #3281FF !important;
		/* background: linear-gradient(to bottom, #4869EE 70%, #f0f2f6 30%) !important; */
		position: relative;
		height: calc(280rpx + 88rpx);
		margin-bottom: 80upx;
		
	}

	swiper-item {
		display: flex;
		align-items: center;
		border-radius: 20upx;
		overflow: hidden;
	}

	.swiper-banner image {
		width: 100%;
		height: 100%;
	}

	.bannerDots {
		width: 80rpx;
		height: 16rpx;
		display: flex;
		position: absolute;
		bottom: -80rpx;
		left: 50%;
		transform: translate(-50%);
		align-items: center;
		justify-content: space-between;
	}

	.bannerDots .banner-dot {
		width: 10rpx;
		height: 10rpx;
		border-radius: 5rpx;
		background: #EAEAEA;
	}

	.bannerDots .banner-dot.active {
		width: 26rpx;
		height: 10rpx;
		background: #3281FF;
	}

	.proclamation {
		width: 100%;
		overflow: hidden;
		margin-top: 20rpx;
		background-color: #FFFFFF;
	}

	.proclamation-hint {
		width: 95%;
		height: 70rpx;
		display: flex;
		align-items: center;
		padding-left: 20upx;
		flex-wrap: nowrap;
	}

	.proclamation-hint .iconfont {
		font-size: 44rpx !important;
		margin-left: 8rpx;
	}

	.proclamation-center {
		width: 83%;
		padding-left: 20upx;
		font-size: 24upx;
		color: #9A9A9A;
	}

	.proclamation-right {
		padding-left: 7upx;
		width: 7%;
	}

	.uni-grid-6 {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		background-color: #FFFFFF;
		color: #555555;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}

	.uni-grid-6-item {
		width: 33.3%;
		display: flex;
		margin-bottom: 15rpx;
		margin-top: 15rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
		box-sizing: border-box;
		/* border-top: 1upx solid #E6E6E6; */
		line-height: 52upx;
	}

	.uni-grid-7-item {
		padding: 20rpx 0;
		width: 50%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 40rpx;
	}

	.item7-num {
		font-size: 24rpx;
		color: #949ebc;
	}

	.item7-num>text {
		font-size: 32rpx;
		color: #252B3A;
		font-weight: 600;
	}

	.item7-intro {
		font-size: 24rpx;
		color: #999999;
	}

	.item7-icon {
		margin: 0 25rpx 0 25rpx;
		color: #ffffff;
		font-size: 38rpx;
		width: 66upx;
		margin-right: 30rpx;
		height: 66upx;
		background-color: #3281FF;
		text-align: center;
		line-height: 66upx;
		border-radius: 50%;
	}

	.uni-grid-6-text {
		width: 50%;
		display: flex;
		flex-direction: column;
		margin: 5upx 0;
	}

	.signcontract {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		line-height: 80rpx;
		color: #555555;
		position: relative;
	}

	.signcontracts::after {
		content: "";
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		width: 120%;
		left: 0;
		height: 1px;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.sign_text {
		display: flex;
		align-items: center;
	}

	.swiper-notify {
		height: 56upx;
		width: 100%;
		overflow: hidden;
	}

	.sign_date {
		line-height: 80rpx;
	}

	.common text {
		vertical-align: middle;
		font-size: 36upx;
		font-weight: 500;
		color: #3a3a3a;
	}
	.common::after {
	    content: "";
	    position: absolute;
	    z-index: 10;
	    right: 0;
	    bottom: 0;
	    left: 0px;
	    height: 0px;
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #c8c7cc;
	}
	
	/* 图标通用样式 */
	.qiun-charts {
		width: 100%;
		height: 500upx;
		/* padding: 16rpx 0; */
		background-color: #FFFFFF;
	}

	.charts {
		width: 99%;
		height: 500upx;
		margin: 0 auto;
		background-color: #FFFFFF;
	}
	.qiun-bg-white {
		background: #FFFFFF;
	}
	
	.qiun-common-mt {
		margin-top: 10upx;
	}
	.overflow-notice {
		width: 90%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
